<template>
  <uni-popup ref="popupRef" type="bottom">
    <view class="popup-container">
      <scroll-view scroll-y class="popup-content">
        <view
          v-for="item in items"
          :key="item.value"
          class="popup-item"
          :class="{ selected: item.value === value }"
          @click="handleSelect(item)"
        >
          {{ item.text }}
        </view>
      </scroll-view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from "vue";

const props = defineProps({
  items: {
    type: Array as () => Array<{ value: string; text: string }>,
    required: true,
  },
  value: {
    type: [String, Number],
    default: "",
  },
});

const emit = defineEmits(["select"]);

const popupRef = ref<any>();

const handleSelect = (item: { value: string; text: string }) => {
  emit("select", item);
  close();
};

const open = () => {
  popupRef.value?.open();
};

const close = () => {
  popupRef.value?.close();
};

defineExpose({ open, close });
</script>

<style scoped lang="scss">
.popup-container {
  background: #fff;
  max-height: 70vh;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  overflow: hidden;

  .popup-content {
    padding: 20rpx;
    max-height: 50vh;
    box-sizing: border-box;
  }

  .popup-item {
    padding: 28rpx 20rpx;
    margin: 10rpx 0;
    background: #f8f8f8;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #666;
    transition: all 0.2s ease;

    &.selected {
      background: #87bdff;
      color: #fff;
      // transform: scale(1.02);
    }
  }
}
</style>